<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				font-family: "微软雅黑";
			}
			
			a {
				text-decoration: none;
				color: black;
				cursor: pointer;
			}
			
			.main {
				/*border: 1px solid;*/
				min-width: 536px;
				width: 100%;
				background-color: #ECECEC;
			}
			
			.fix {
				position: fixed;
				min-width: 536px;
				z-index: 100;
				background-color: blue;
			}
			
			.xinhao {
				float: left;
				padding: 0px 5px;
			}
			
			.xinhao>img {
				margin-bottom: 2px;
			}
			
			.zhuangtai {
				float: right;
				padding: 0px 15px;
			}
			
			.zhuangtai>:nth-child(n) {
				margin: 0px 2px;
			}
			
			.head {
				overflow: hidden;
				font-size: 12px;
				width: 100%;
				color: white;
				/*border: 1px solid;*/
			}
			
			.time {
				position: absolute;
				top: 0px;
				left: 0px;
				/*border: 1px solid;*/
				width: 100%;
				text-align: center;
			}
			
			.column {
				/*border: 1px solid;*/
				width: 100%;
				/*overflow: hidden;*/
				top: 16px;
				padding: 3px 0px;
				color: white;
				/*font-size: 30px;*/
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.column>.left>span {
				margin: 4px 8px;
			}
			
			.column>.left {
				padding: 0px 7px;
			}
			
			.titil {
				position: absolute;
				top: 5px;
				left: 0px;
				/*border: 1px solid;*/
				text-align: center;
				width: 100%;
			}
			
			.column>.left>img {
				margin-top: 2px;
			}
			
			.column>.right img {
				margin-right: 12px;
			}
			
			.backgroudim {
				width: 100%;
				display: block;
			}
			
			.backimg {
				position: relative;
				/*height: 530px;*/
				border: 1px solid;
				margin-bottom: 20px;
			}
			
			.face {
				position: absolute;
				bottom: 70px;
				left: 30px;
				width: 68px;
				border-radius: 50%;
				border: 3px solid white;
			}
			
			.huiyuan {
				position: absolute;
				bottom: 59px;
				left: 32px;
			}
			
			.tianqi {
				position: absolute;
				bottom: 80px;
				right: 90px;
			}
			
			.tianqi>span {
				color: white;
				font-size: 44px;
			}
			
			.tianqi>p {
				color: #CCCCCC;
				font-size: 13px;
			}
			
			.menu {
				position: absolute;
				width: 100%;
				/*border: 1px solid;*/
				bottom: 0px;
				background: rgba(0, 0, 0, 0.2);
			}
			
			.menu>div {
				float: left;
				/*border: 1px solid;*/
				width: 24.9%;
				padding: 15px 0px;
			}
			
			.menu>div>a {
				display: block;
				text-align: center;
				color: white;
				border-right: 1px solid;
				/*border: 1px solid;*/
			}
			
			.menu>div:hover {
				transition: 1s linear;
				background-color: rgba(238, 171, 69, 0.3);
			}
			
			.menu>div:last-child a {
				border: 0px;
			}
			.content{
				background-color: white;
				width: 100%;
				padding: 10px;
			}
			.conten-head .smallface{
				width: 50px;
				border-radius: 50%;
				float: left;
			}
			.conten-head{
				margin-bottom: 10px;
			}
			.conten-head p{
				/*border: 1px solid;*/
				margin: 5px 0px;
				margin-left: 60px;
			}
			.relative{
				position: relative;
			}
			.clearOverflow{
				overflow: hidden;
			}
			.nicheng{
				margin-right:5px;
			}
			.daren{
				margin: 2px;
			}
			.times{
				color: #8C8C8C;
				font-size: 12px;
			}
			.conten-container-1{
				width: 536px;
			}
			.conten-container-1>img{
				width: 100%;
			}
			.conten-container-4{
				width:536px;
				/*border: 1px solid;*/
			}
			.conten-container-4>img{
				width: 260px;
			}
			.conten-container-9{
				width:100%;
				/*border: 1px solid;*/
			}
			.conten-container-9>img{
				width: calc(100%/3 - 5px);
			}
			.page{
				margin: 20px 0px;
			}
			.zhuanfa{
				border-bottom: 1px solid #8A8B8E;
				width: 100%;
				padding: 20px 0px;
			}
			.zhuanfa img{
				float: right;
				margin-left: calc(50%/3);
			}
			.zhuanfa>span{
				color: #8A8B8E;
			}
			.zan>span:after{
				content: ' 、';
			}
			.zan>img{
				float: left;
				margin-right: 10px;
				margin-top: 2px;
			}
			.zan>span>a{
				font-size: 16px;
				color: #3D6C9F;
			}
			.zan{
				/*border: 1px solid;*/
				margin: 20px 0px;
			}
			.pinglunqu a{
				font-size: 16px;
				color: #3D6C9F;	
			}
			.pinglunqu>p>span{
				margin-right: 5px;
			}
			.pinglunqu>p{
				margin: 10px 0px;
			}
			.txtpinglun{
				padding: 10px 0px;
				position: relative;
			}
			.txtpinglun>input{
				width: 100%;
				height: 30px;
				border: 1px solid #EEEEEF;
			}
			.txtpinglun>a>img{
				position: absolute;
				top: calc(100%/2 - 9px);
				right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="head fix">
				<span class="xinhao">
								<img src="img/信号.png"/>
								<span>中国移动</span>
				</span>
				<span class="time">14:56</span>
				<span class="zhuangtai">
								<img src="img/解锁.png"/>
								<img src="img/闹钟.png"/>
								<span>85%</span>
				<img src="img/电量.png" />
				</span>
			</div>
			<div class="column fix">
				<div class="left">
					<img class="fl" src="img/返回箭头.png" />
					<span class="fl"> <a style="color: white;" href="#">动态</a> </span>
				</div>
				<span class="titil">好友动态</span>
				<div class="right">
					<a href="#"><img class="fr" src="img/添加好友.png" /></a>
				</div>
			</div>
			<div class="backimg">
				<img class="backgroudim" src="img/3.jpg" />
				<img class="face" src="../wechat/face/4.jpg" />
				<img class="huiyuan" src="img/会员标志.png" />
				<div class="tianqi">
					<img class="tianqiimg" src="img/天气.png" />
					<span>10°</span>
					<p>天津 PM2.5 103</p>
				</div>
				<div class="menu">
					<div>
						<a href="#">相册</a>
					</div>
					<div>
						<a href="#">说说</a>
					</div>
					<div>
						<a href="#">个性化</a>
					</div>
					<div>
						<a href="#">与我相关</a>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="conten-head">
					<img class="smallface" src="face/6.jpg"/>
					<p class="clearOverflow"><a class="fl nicheng" href="#">昵称打发打发地方</a><img class="fl daren" src="img/手机达人.png"/><a class="fr" href="#"><img src="img/下拉箭头@2x.png" /></a></p>
					<p class="times">今天18:08</p>
				</div>
				<p class="page">要时不时的鼓励一下自己，万一真的胖了呢？万一真的胖了呢？万一真的胖了呢？万一真的胖了呢？万一真的胖了呢？万一真的胖了呢？万一真的胖了呢？</p>
				<div class="conten-container-9">
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
					<img src="face/1.jpg"/>
				</div>
				<div class="zhuanfa">
					<span>浏览62次</span>
					<a href="#"><img src="img/赞.png"/></a>
					<a href="#"><img src="img/评论.png"/></a>
					<a href="#"><img src="img/转发.png"/></a>
				</div>
				<div class="zan">
					<img src="img/点赞.png"/>
					<span><a href="#">sakura addition</a></span>
					<span><a href="#">我该如何去执着</a></span>
					<span><a href="#">包伟杰Hiahia</a></span>
				</div>
				<div class="pinglunqu">
					<p><a href="#">hiahia</a><span>:</span>万一真的瘦了呢 </p>
					<p><a href="#">我</a><span> 回复</span><a href="#">hiahia</a><span>:</span>咒我咒我咒我 </p>
				</div>
				<div class="txtpinglun">
					<input type="text" name="" id="" value="" placeholder="  评论" />
					<a href="#"><img src="img/红包悬赏.png"/></a>
				</div>   
			</div>

		</div>
	</body>

</html>